<template>
  <div class="div">
    <PageTitle title="用户发货列表"></PageTitle>
    <el-row :gutter="10">
      <el-col :span="12">
        <!-- <dl class="select-bar">
          <dt>筛选:</dt>
          <dd :class="{ current: status == '' }" @click="handleClick('')">全部</dd>
          <dd :class="{ current: status == '1' }" @click="handleClick('1')">待付款</dd>
          <dd :class="{ current: status == '2' }" @click="handleClick('2')">待发货</dd>
          <dd :class="{ current: status == '6' }" @click="handleClick('6')">待收货</dd>
          <dd :class="{ current: status == '4' }" @click="handleClick('4')">已完成</dd>
          <dd :class="{ current: status == '5' }" @click="handleClick('5')">退货申请中</dd>
        </dl> -->
      </el-col>
      <el-col :span="6">
        <el-input :placeholder="'输入订单号搜索'" v-model="search" @keypress.enter.native="handleSearch">
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <DatePicker @dateChange="dateChange" />
      </el-col>
      <el-col :span="6">
        <el-button type="primary"  v-if="user_state == 1" @click="Export">导出</el-button>
      </el-col>
    </el-row>
    <el-table stripe :data="tableData">
      <el-table-column prop="id" label="id" width="60"></el-table-column>
      <el-table-column prop="orderlist" label="订单号"></el-table-column>
      <el-table-column prop label="商品" width="500">
        <template slot-scope="scope">
          <ul class="goods">
            <li>
              <span>图片</span>
              <span>名称</span>
              <span>价格</span>
              <span>是否开盒</span>
            </li>
            <li v-for="(item,index) in scope.row.goods" :key="index">
              <div class="img"  v-if="item.pen ==2">
                <img  :src="item.url" @click="handlePictureCardPreview(item.url)" />
              </div>
              <div class="img" v-else>
                <img :src="item.durl" @click="handlePictureCardPreview(item.durl)" />
              </div>
              <div class="title">{{item.goods_name}}</div>
              <div class="price">{{item.subtotal}}</div>
              <div class="open">{{item.pen==1?'已开盒':'未开盒'}}</div>
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop label="收货信息" width="300">
        <template slot-scope="scope">
          <div class="receint">
            <div class="name">
              <span>收货人：{{scope.row.name}}</span>
            </div>
            <div class="tel">
              <span>联系方式：{{scope.row.mobile}}</span>
            </div>
            <div class="address">
              <span>收货地址：{{scope.row.province+scope.row.city+scope.row.district+scope.row.address}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="下单时间"></el-table-column>
      <el-table-column prop label="订单状态">
        <template slot-scope="scope">
          {{!scope.row.com?'未发货':'已发货'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link
            :to="'/sendOrderList/sendOrderDetail/' + scope.row.orderlist"
            class="el-button el-button--text"
          >查看</router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageNum"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script>
	import PageTitle from "@/components/pageTitle/PageTitle.vue";
	import DatePicker from "@/components/datePicker/DatePicker.vue";
	export default {
  		name: "SendOrderList",
		components: {
			PageTitle,
			DatePicker
		},
		activated() {
			this._getList();
		},
  		data() {
			return {
				dialogImageUrl: "",
				dialogVisible: false,
				tableData: [],
				status: "",
				pageNum: 1,
				pageSize: 10,
				totalCount: 0,
				searchData: "",
				date: [],
				search: "",
				user_state:localStorage.getItem('user_state')
			};
  		},
  		computed: {
    		statusParams() {
      			let obj = {};
				switch (this.status) {
					case "":
						break;
					case "1":
						obj.payment_status = 1;
						break;
					case "2":
						obj.payment_status = 2;
						obj.shipping_status = 2;
						break;
					case "4":
						obj.shipping_status = 4;
						break;
					case "5":
						obj.shipping_status = 5;
						break;
					case "6":
						obj.shipping_status = 6;
						break;
				}
      			return obj;
    		}
  		},
  		methods: {
    		//数据导出
    		Export(){
      			this.$confirm('是否导出表中数据?', '提示', {
      		    	confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
        		}).then(() => {
					console.log('确定导出')
					let token = localStorage.getItem('token')
					let start=''
					let end = ''
					if (this.date.length>0) {
						start = this.date[0]
						end = this.date[1]
					}
					if (this.tableData.length>0) {
						location.href = 'http://admin.youjingxi.com.cn/v1/channel/res?token=' + token + '&start_time=' + start + '&end_time=' + end
					}else{
						this.$message({
							showClose: true,
							message: '没有发货订单',
							type: 'warning'
						});
					}
        			
        		}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});          
        		});
			},
			//获取数据列表
    		async _getList() {
      			let {data: { code, data }} = await this.$axios({
					url: this.$api + "/v1/deliver/show",
					method: "GET",
					params: {
						size: this.pageSize,
						page: this.pageNum,
						...this.statusParams,
						start_time: this.date[0],
						end_time: this.date[1],
						order: this.search
					}
      			});
      			if (code === 0) {
        			if (data.items) {
						data.items.forEach((item,index)=>{
							item.goods = data.data[index]
						})
          				console.log('data.items------------',data.items)
          				this.tableData = data.items
          				this.totalCount = parseInt(data.page.totalCount);
					} else {
						this.tableData = [];
					}
      			}
    		},
			
			//搜索
			handleSearch() {
				this.pageNum = 1;
				this._getList();
			},
			//翻页
			pageChange(pageNum) {
				this.pageNum = pageNum
				this._getList()
			},
			//选择日期
			dateChange(date) {
				this.date = date;
				this.pageNum = 1;
				this._getList();
			},
			//查看大图
			handlePictureCardPreview(src) {
				this.dialogImageUrl = src;
				this.dialogVisible = true;
			},
			handleClick(s) {
				this.status = s;
				this.pageNum = 1;
				this.$nextTick(() => {
					this._getList();
				});
			},
  		}
	};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.goods {
  padding: 0;
  margin: 0;
}
.goods li {
  list-style: none;
  border-bottom: 1px solid #efefef;
  line-height: 40px;
}
.goods li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.goods li .img {
  width: 60px;
  max-height: 60px;
}
.goods li:nth-child(1) span:nth-child(1) {
  width: 80px;
}
.goods li .title,
.goods li:nth-child(1) span:nth-child(2) {
  width: 250px;
  line-height: 24px;
  padding-left: 20px;
}
.goods li .price,
.goods li:nth-child(1) span:nth-child(3) {
  width: 100px;
  text-align: center;
}
.goods li .open,
.goods li:nth-child(1) span:nth-child(4) {
  width: 100px;
}
.goods li img {
  max-width: 100%;
}

.receint span {
  line-height: 24px;
}
</style>
